<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>轮回眼</title>
        <style type="text/css">
            .box{
                position: relative;
                width: 100%;
                height: 800px;
                border: 1px solid #000000;
                margin: 50px auto 0;
            }
            .orbit{
                position: absolute;
                overflow: hidden;
                width: 400px;
                height: 220px;
                float: left;
                border: 10px solid #000000;
                transform: skew(-30deg);
                top: 280px;
                left: 200px;
                border-radius:190px 10px 170px 10px ;
                box-shadow: 0px 0px 20px #000000,0px 10px 20px  #000000 inset;
                 
            }
            .eye{
                position: absolute;
                transform: skew(30deg);
                float: left;
                top: -60px;
                left: -90px;
                width: 600px;
                height: 300px;
                background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                animation: sca .5s infinite;
            }
            .eye::after{
                content: "";
                display: block;
                width: 25px;
                height: 25px;
                background-color: #000000;
                position: absolute;
                border-radius: 50%;
                left: 288px;
                top: 136px;
            }
            .orbitC{
                position: absolute;
                overflow: hidden;
                width: 400px;
                height: 220px;
                float: left;
                border: 8px solid #000000;
                transform: skew(-30deg);
                top: 280px;
                left: 200px;
                border-radius:190px 10px 170px 10px ;
                box-shadow: 0px 0px 50px #000000,15px 30px 30px 5px #000000 inset;
                 
            }
            @keyframes sca{
                0%{
                    background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                }
                25%{
                    background:repeating-radial-gradient(45px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                }
                50%{
                    background:repeating-radial-gradient(50px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                }
                75%{
                    background:repeating-radial-gradient(45px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                }
                100%{
                    background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="orbit">
                <div class="eye"></div>
            </div>
            <div class="orbitC"></div>
             
        </div>
    </body>
</html>